<script setup lang="ts">
import { ref } from 'vue'
import Mobile from './components/mobile.vue'
import Password from './components/password.vue'
// 登录方式切换
const loginTabs = ref([
  { title: '密码登录', value: 0 },
  { title: '短信验证码登录', value: 1 },
])
const index = ref(0)
const changeLogin = () => {
  index.value = index.value === 0 ? 1 : 0 
  console.log('index', index.value)
}
</script>
<template>
  <view class="user-login">
    <view class="login-type">
      <view class="title">{{ loginTabs[index].title }}</view>
      <view class="type" @click="changeLogin">
        <text>{{ loginTabs[Math.abs(index - 1)].title }}</text>
        <uni-icons color="#3c3e42" type="forward" />
      </view>
    </view>
    <Password v-if="index === 0" />
    <Mobile v-else />
  </view>
  <!-- 社交账号登录 -->
  <view class="social-login">
    <view class="legend">
      <text class="text">其它方式登录</text>
    </view>
    <view class="social-account">
      <view class="icon">
        <uni-icons color="#00b0fb" size="30" type="qq" />
      </view>
      <view class="icon">
        <uni-icons color="#fb6622" size="30" type="weibo" />
      </view>
      <view class="icon">
        <uni-icons color="#07C160" size="30" type="weixin" />
      </view>
    </view>
  </view>
</template>

<style lang="scss">
@import './index.scss';
</style>
